<template>
  <div>
    <el-input v-model="formlist.icon">
      <el-button slot="append" icon="el-icon-search" style="width: 100px" @click="icondia = true"></el-button>
    </el-input>
    <el-dialog title="选择图标" :visible.sync="icondia" width="800px" append-to-body>
      <div class="gridbale" style="">
        <div
          class="flexabley"
          style=""
          v-for="(item, index) in iconlist"
          :key="index"
          @click="
            formlist.icon = item
            icondia = false
          "
        >
          <i :class="item" style="font-size: 25px"></i>
          <div style="margin-top: 10px; text-align: center">{{ item }}</div>
        </div>
        <!-- </div> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
import iconList from './icon.js'
export default {
  data() {
    return {
      iconlist: iconList.iconlist,
      icondia: true,
      formlist: {
        icon: '',
      },
    }
  },
}
</script>
<style scoped>
.gridbale {
  display: grid; //网格布局
  grid-template-columns: repeat(6, 16.666%);
  border: 1px solid #ccc;
  height: 330px;
  overflow: auto;
}
.gridbale::-webkit-scrollbar {
  display: none;
}
.flexabley {
  // margin: 10px;
  cursor: pointer;

  // width: 25%;
  padding: 30px 0;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-bottom: -1px;
  margin-right: -1px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
}
.flexabley:hover {
  color: #409eff;
}
</style>
